<template>
    <div class="uservip-root">
      <el-row>
        <el-col :span="6">
          <el-input placeholder="搜索用户或手机号" v-model="searchThis" @change="search"></el-input>
        </el-col>
      </el-row>
      <el-table
          :data="tableData"
          stripe
          height="550"
          v-loading.body="loading"
          element-loading-text="新联为您加载数据中"
          border>
          <el-table-column
              prop="index"
              label="序号"
              width="90"
              sortable
              fixed="left"
              >
          </el-table-column>
          <el-table-column
              prop="name"
              label="用户"
              sortable
              fixed="left"
              width="90">
          </el-table-column>
          <el-table-column
              prop="account"
              label="账号"
              fixed="left"
              sortable
              width="150">
          </el-table-column>
          <el-table-column
            label="手机归属地"
            width="200"
          >
          </el-table-column>
          <el-table-column
              prop="sex"
              label="性别"
          >
          </el-table-column>
          <el-table-column
              prop="address"
              label="地址"
              width="260"
          >
          </el-table-column>
          <el-table-column
              prop="regtime"
              label="注册时间"
              width="200"
          >
          <template scope="scope">
            <el-popover trigger="hover" placement="right">
              <p>开通档案{{scope.row.filereg}}天</p>
              <p>{{scope.row.lastlogin}}天前登陆</p>
              <div class="" slot="reference">
                  {{scope.row.regtime}}
              </div>
            </el-popover>
          </template>
          </el-table-column>
          <el-table-column
              prop="regfrom"
              label="注册来源"
              width="260"
          >
          </el-table-column>
          <el-table-column
            label="链接设备"
            width="300"
          >
          </el-table-column>
          <el-table-column
              prop="attention"
              label="我的关注"
              width="200"
          >
          </el-table-column>
          <el-table-column
              prop="attention"
              label="关注我的"
              width="200"
          >
          </el-table-column>

          <el-table-column
              label="详情"
              width="75"
              prop="uid"
              fixed="right"
              >
              <template scope="scope">
              <router-link :to="{path:'/user-detail/test-data',query:{uid:scope.row.uid}}">查看</router-link>
              </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="100"
            fixed="right"
          >
            <template scope="scope">
              <router-link :to="{name:'msg-reply',query:{uid:scope.row.uid}}" >在线帮助</router-link>
            </template>
          </el-table-column>

      </el-table>
      <footer>
        <el-pagination layout="total,prev,pager,next,jumper" :total="pagination.total" :page-size="pagination.pageSize" @current-change="handleCurrentChange">
        </el-pagination>

      </footer>
    </div>
</template>

<script>
export default{
  name: 'uservip',
  data () {
    return {
      searchThis: '',
      tableData: [],
      loading: true,
      currentHeight: 550,
      pagination: {}
    }
  },
  components: {

  },
  methods: {
    search (searchThis) {
      console.log(searchThis)
    },
    fetchData (val) {
      // console.log(this.uid, this.page)
      this.$http({
        method: 'post',
        url: 'http://api.xltest.cn/sryk/useregister',
        data: {
          'uid': this.uid,
          'page': val
        }
      }).then(data => {
        // var res = JSON.parse(data.body)
        var res = data.body
        console.group('userVip')
        // console.log(data.body)
        this.tableData = res.vipUserList
        this.pagination = res.pagination
        // bus.$emit('userRegister-GetstatisticsData', res.statisData)
        // vuex初级应用 分发action传值
        // this.$store.dispatch('setStatisData', res.statisData)
        this.loading = false
      })
    },
    handleCurrentChange (val) {
      // console.log(val)
      this.loading = true
      this.fetchData(val)
    }
  },
  created () {
    this.fetchData()
  },
  mounted () {
    // console.log('succeed')
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // console.log(vm.uid, window.sessionStorage)
      console.groupEnd()
    })
  }
}
</script>

<style lang="scss" scoped>
.uservip-root{
  margin-top:25px;
  table{
    width:100%;
  }
  .el-input{
    margin-bottom:25px;
  }
}
.el-popover>p{
  text-align:center;
  font-size:14px;
  line-height:1.5;
}
</style>